{extend name="layouts/defatul" /}  <!--模板继承defatul，减少代码复用-->

{block name="title"}帮助页{/block}
{block name="content"}


<div class="row  ">
    <div class="col-md-4">
        <div class="card ">卡片1</div>
    </div>
    <div class="col-md-4 ">
        <div class="card">卡片2</div>
    </div>
    <div class="col-md-4">
        <div class="card">卡片3</div>
    </div>
</div>





<div class="row border " style="height: 50px">
    <div class="col-4 border align-self-start">1</div>
    <div class="col-4 border align-self-center">2</div>
    <div class="col-4 border ">3</div>

</div>

<div class="border clearfix">
    <div>
    <img  src="/images/faces/avatar0.png" class="col-md-6 float-md-end ms-md-3" alt="Responsive image" />
    <p>
        A paragraph of placeholder text. We’re using it here to show the use of the clearfix class. We’re adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
    </p>

    <p>
        As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
    </p>

    <p>
        And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there’s none of that here.
    </p>

    </div>

</div>

<table class="table table-warning table-striped table-hover">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
    </tr>
    <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
    </tr>
    <tr>
        <th scope="row">3</th>
        <td>John</td>
        <td>Doe</td>
        <td>@social</td>
    </tr>
    </tbody>
</table>


<form action="{:url('image')}" method="post" enctype="multipart/form-data" class="mt-4">
    <div class="mb-3">
        <label for="image" class="form-label">选择图片</label>
        <input type="file" class="form-control" id="image" name="image" >
    </div>
    <button type="submit" class="btn btn-primary">上传图片</button>
</form>

<!-- 图片预览区域 -->
<div class="mt-3">
    <img id="preview" src="#" alt="图片预览" class="img-thumbnail d-none" style="max-width: 300px;">
</div>

{/block}

{block name="js"}
<script>
    document.getElementById('image').addEventListener('change', function(e) {
        const preview = document.getElementById('preview');
        const file = e.target.files[0];

        if (file) {
            const reader = new FileReader();

            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.classList.remove('d-none');
            }

            reader.readAsDataURL(file);
        } else {
            preview.src = '#';
            preview.classList.add('d-none');
        }
    });
</script>
{/block}